<template>
	<view>
		<view class="image1" v-if="show && show1 == true" @click="click">
			<view>
				<image :src='get_img + sys.coupon_popup1' class="img1"></image>
				<p class="red">{{sys.first_coupon}}<span class="red1">元</span></p>
			</view>
		</view>
		<view>
			<view :style="'background-image: url('+get_img+bgFunc()+');'" class="image"></view>
			<view class="lingjiang">
				<view class="rule">规则：</view>
				<view class="rule1">{{sys.coupon_rule}}</view>
				<view class="but">
					<u-button type="button" openType="share" :customStyle="customstyle" @click="clicks"></u-button>
				</view>
			</view>
			<p class="jine">已获得：{{user.coupon||0}}元</p>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				get_img: this.$get_img,
				sys: {},
				time:"",
				id: "",
				user: {},
				show: false,
				customstyle: {
					height: '110rpx'
				},
				show1: true
			}
		},
		onShow() {
			this.get_infor()
			let ls_pop = uni.getStorageSync("popup")
			if (ls_pop == true) {
				this.show = false
			}
			let that=this
			this.sys = uni.getStorageSync("sys")
			if(!this.sys){
				setTimeout(function(){
					that.sys = uni.getStorageSync("sys")
				},2000)
			}
			
			let share = uni.getStorageSync("share")
			if (share) {
				this.show = true
				this.show1 = true
				uni.removeStorageSync("share")
			}
			uni.setStorageSync("popup", true)
		},
		onUnload() {
			console.log("hide")
			clearInterval(this.time)
		},
		onLoad(option) {
			let that=this
			
			
			this.user = uni.getStorageSync("infor")
			if(!this.user){
				setTimeout(function(){
						that.user = uni.getStorageSync("infor")
				},2000)
			}
			
			
			if (option.share_id) {
				setTimeout(function(){
					that.coupon_invite(option.share_id)
				},3000)
			}
			
			
			this.time=setInterval(function(){
				that.get_coupon_price()
			},2000)
		},

		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
			}
			return {
				title: this.sys.share_title,
				path: '/pages/coupon/coupon?id=' + this.user.id + "&type=share_coupon",
				success(res) {
					console.log("分享成功")
					this.show1 = true
					this.show = true

					console.log("this.show1111:", this.show1)
				}
			}
		},
		methods: {
			bgFunc() {
				return this.sys.coupon_bg != '' ? this.sys.coupon_bg : this.sys.sys_background
			},
			clicks() {
				this.show = false
				this.show1 = false
			},
			get_coupon_price(){
				let that=this
				this.$model.get("user/coupon/get_coupon_price").then(res=>{
					if(res.code==200){
						if(res.data.data>0){
							that.sys["first_coupon"]=res.data.data
							that.show=true
							that.show1=true
						}
					}
				})
			},
			coupon_invite(id) {
				this.$model.get("user/coupon/insert_coupon?invite_uid=" + id).then(res => {
					if (res.code == 200) {

					}
				})
			},
			click() {
				this.show = false
				this.show1 = false
				this.user = uni.getStorageSync("infor")
				this.get_infor()
			},
			get_infor() {
				let that = this
				this.$model.get("user/get_infor").then(res => {
					if (res.code == 200) {
						uni.setStorageSync("infor", res.data)
						that.user = res.data
					}
				})
			}

		}
	}
</script>

<style>
	.image {
		background-repeat: no-repeat;
		background-size: cover;
		background-attachment: fixed;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		z-index: -1;
	}

	.image1 {
		width: 100vw;
		height: 100vh;
		background-color: rgba(255, 255, 255, .5);
		/* margin-top: -1050rpx; */
	}

	.coupon_img {
		height: 481rpx;
		width: 400rpx;
		margin: 100rpx;
		border-radius: 10px;
		background-size: 100% 100%;
		position: fixed;
		z-index: 1;
		margin: -300rpx 175rpx 0 175rpx;
	}

	.top {
		font-size: 60rpx;
		font-weight: 900;
		text-align: center;
		margin-top: 25rpx;
		color: #F8DF62;
	}

	.b1 {
		height: 230rpx;
		width: 300rpx;
		margin: 900rpx 0 0 225rpx;
		z-index: 22;
		position: absolute;
	}

	button {
		background-image: url("@/static/icon/button.png");
		background-size: 300rpx 110rpx;
	}

	.red {
		width: 250rpx;
		height: 90rpx;
		margin-top: -270rpx;
		z-index: 999;
		position: absolute;
		margin-left: 280rpx;
		font-size: 30px;
		text-align: center;
		color: red;
		font-weight: 700;
	}

	.img1 {
		width: 400rpx;
		height: 481rpx;
		margin: 350rpx 175rpx auto 175rpx;
	}

	.red1 {
		font-size: 15px;
		font-weight: 400;
	}

	.lingjiang {
		width: 550rpx;
		height: auto;
		margin-left: 105rpx;
		margin-top: 630rpx;
		z-index: -1;
		position: fixed;
	}

	.rule {
		height: auto;
		color: #FBA807;
		font-size: 15px;
		font-weight: 600;
		width: 480rpx;
		margin-left: 50rpx;
	}

	.rule1 {
		width: 480rpx;
		height: auto;
		text-indent: 2em;
		font-size: 13px;
		color: #FBA807;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-left: 35rpx;
		line-height: 140%;
		letter-spacing: 4rpx
	}

	.but {
		width: 300rpx;
		height: 110rpx;
		margin-left: 125rpx;
		margin-top: 120rpx;
	}

	.jine {
		font-weight: 500;
		float: right;
		margin-top: 60rpx;
		color: #FBAC13;
		margin-right: 30rpx;
	}
</style>
